<template >
    <div class="categories">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/menu/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/menu/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 表格 -->
            <!-- 添加分类 -->
            <el-button type="primary" @click="ad()">添加</el-button>
            <zk-table :data='data' :columns='columns' :show-index=true index-text="索引" :expand-type=false
                :selection-type=false>
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" @click='update(scope.row)' size="small" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" @click='del(scope.row)' size="small" icon="el-icon-delete">删除</el-button>
                </template>
                <template slot="deleted" slot-scope="scope">
                    <i class="el-icon-success" v-show="!scope.row.cat_deleted">
                    </i>
                    <i class="el-icon-error" v-show="scope.row.cat_deleted" >
                    </i>
                </template>
                <template slot='level' slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.cat_level == 0" plain disabled>一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level == 1" plain disabled>二级</el-tag>
                    <el-tag type="danger" v-else plain disabled>三级</el-tag>
                </template>
            </zk-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[3,5,7,10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
        </el-card>
        <!-- 添加的模态框 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="form.cat_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级分类"  >
                    <el-cascader v-model="value" style="width:100%" props.checkStrictly = true :options="data" :props="{ checkStrictly: true ,label:'cat_name',value:'cat_id',children:'children' }"
                        ></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑的模态框 -->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
            <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="form.cat_name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="do_update()">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible1: false,
            tableData: [],
            queryInfo: {
                pagenum: 1,
                pagesize: 5,
                type: [1, 2, 3]
            },
            total: 0,
            columns: [
                { label: '分类名称', prop: 'cat_name' },
                { label: '是否有效', prop: 'cat_deleted', type: 'template', template: 'deleted' },
                { label: '排序', prop: 'cat_level', type: 'template', template: 'level' },
                { label: '操作', type: 'template', template: 'caozuo' }

            ],
            data: [],
            value:[],
            form: {
                cat_name: '',
                cat_level: '',
                cat_id: '',
            },
            id: 0,
            rules: {
                cat_name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                cat_level: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    mounted() {
        this.goodscate()
    },
    methods: {
        async goodscate() {
            var res = await this.axios({
                url: "/v1/categories",
                params: this.queryInfo
            })
            console.log(res);
            this.data = res.data.data.result
            this.total = res.data.data.total
        },
        // 添加
        async ad() {
           this.dialogFormVisible=true
           var res = await this.axios({
                url: "/v1/categories",
                params: {
                    pagesize:this.queryInfo.pagesize,
                    pagenum:this.queryInfo.pagenum,
                    type:2
                }
            })
            console.log(res,"tj");
            this.data = res.data.data.result
            console.log(this.data,"data");
            
            
        },
       async add(){
          
           this.form.cat_level = this.value.length
           if(this.value == ''){
            this.form.cat_id = 0
           }else{
            this.form.cat_id = this.value[this.value.length-1]
           }
           console.log( this.form.cat_id , 'pid');
           console.log( this.form.cat_level ,'level');
          var res =await this.axios({
            url:"/v1/categories",
            method:"POST",
            data:{
               cat_name:this.form.cat_name,
               cat_level:this.form.cat_level,
               cat_pid:this.form.cat_id
            }
          })
          console.log(res);
          if(res.data.meta.status == 201){
            this.$message.success(res.data.meta.msg)
            this.dialogFormVisible=false
            this.goodscate() 
            this.form.cat_name=''
            this.value = ''
          }
        },
        // 删除
        del(row) {
            let id = row.cat_id
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                var res = await this.axios({
                    url: `/v1/categories/${id}`,
                    method: 'DELETE'
                })
                console.log(res);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.goodscate()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });

            });
        },
        // 编辑
        update(row) {
            this.dialogFormVisible1 = true,
                this.form.cat_name = row.cat_name
            this.id = row.cat_id
        },
        async do_update() {
            let id = this.id

            var res = await this.axios({
                url: `/v1/categories/${id}`,
                method: "PUT",
                data: {
                    cat_name: this.form.cat_name
                }
            })
            console.log(res);
            if (res.data.meta.status == 200) {

                this.$message.success(res.data.meta.msg)
                this.dialogFormVisible1 = false,
                    this.goodscate()
            }
        },
        handleSizeChange(val) {
            this.queryInfo.pagesize = val
            console.log(this.queryInfo.pagesize);
            this.goodscate()
        },
        handleCurrentChange(val) {
            this.queryInfo.pagenum = val
            console.log(this.queryInfo.pagenum);
            this.goodscate()
        },
    }
}
</script>
<style >
.box-card {
    width: 100%;
    margin-top: 15px;
}

.el-icon-success {
    color: yellowgreen;
}

.el-icon.error {
    color: red;
}
</style>

